/*---------------------------------------------------------面向对象的轮播图插件----------------------------------------------*/
(function($) {
	function Slide(ele,options) {
			//不想每次生成$对象， 转化为 jquery 标签对象
			this.$ele = $(ele);
			//默认设置选项
			this.setting = {
				//控制刚开始炸开的时间
				delay: 1000,
				//控制 interval 的时间
				speed: 2000
			};
			//对象合并
			$.extend(true,this.setting,options);
			//规定好每张图片处于的位置和状态
			this.states = [
				{ZIndex: 1,width: 120,height: 150,top: 69,left: 134,ZOpacity: 0.2}, 
				{ZIndex: 2,width: 130,height: 170,top: 59,left:   0,ZOpacity: 0.5}, 
				{ZIndex: 3,width: 170,height: 218,top: 35,left: 110,ZOpacity: 0.7}, 
				{ZIndex: 4,width: 224,height: 280,top:  0,left: 263,ZOpacity:   1}, 
				{ZIndex: 3,width: 170,height: 218,top: 35,left: 470,ZOpacity: 0.7}, 
				{ZIndex: 2,width: 130,height: 170,top: 59,left: 620,ZOpacity: 0.5}, 
				{ZIndex: 1,width: 120,height: 150,top: 69,left: 500,ZOpacity: 0.2}
			];
			this.lis = this.$ele.find('li');
			this.interval = null;
			//让li从正中间展开
			this.move();
			//开启自动轮播
			this.autoPlay();
			
			this.$ele.find('.wwl-next').click(function(){
				this.next();
			}.bind(this));
			this.$ele.find('.wwl-prev').click(function(){
				this.prev();
			}.bind(this));

			//停止轮播
			this.$ele.find('section').add(this.lis).hover(function() {
				clearInterval(this.interval);
			}.bind(this), function() {
				this.autoPlay();
			}.bind(this));
		}
		//让每个li对应上面staues的每个状态
		Slide.prototype.move = function(){
				this.lis.each(function(index, value) {
					//注意这里的  this 指向问题
					//两个解决方法：1，定义变量传递 2，用bind()方法 使内外this指向一致
					var state = this.states[index];
					$(value).css('z-index', state.ZIndex).finish().animate(state, this.setting.delay).find('img').css('opacity', state.ZOpacity);
				}.bind(this));
		}
		//上一页
		Slide.prototype.next = function(){
				this.states.unshift(this.states.pop());
				this.move();
		}
		//下一页
		Slide.prototype.prev = function(){
				this.states.push(this.states.shift());
				this.move();
		}
		//自动轮播
		Slide.prototype.autoPlay = function(){
				this.interval = setInterval(function() {
					this.next();	//window
				}.bind(this), this.setting.speed);
		}
		
		//找到要轮播的轮播图的根标签，调用 slide 方法
		$.fn.wwlSlide = function(options){
			$(this).each(function(i,ele){
				new Slide(ele,options);
			});
			//支持链式调用
			return this;
		}
})(jQuery);


/*------------------------------------------------面向过程轮播图------------------------------------------------------*/
//(function($) {
//	//本函数每次调用只负责一个轮播图的功能
//	//也就是说只会产生一个轮播图，这个函数的作用域只能分配给一个轮播图
//	//所以要求在调用本函数的时候的时候务必把当前轮播图的根标签传递过来
//	//这里的形参ele就是某个轮播图的根标签
//	var slide = function(ele,options) {
//			//不想每次生成$对象， 转化为 jquery 标签对象
//			var $ele = $(ele);
//			//默认设置选项
//			var setting = {
//				//控制刚开始炸开的时间
//				delay: 1000,
//				//控制 interval 的时间
//				speed: 2000
//			};
//			//对象合并
//			$.extend(true,setting,options);
//			//规定好每张图片处于的位置和状态
//			var states = [
//				{ZIndex: 1,width: 120,height: 150,top: 69,left: 134,ZOpacity: 0.2}, 
//				{ZIndex: 2,width: 130,height: 170,top: 59,left:   0,ZOpacity: 0.5}, 
//				{ZIndex: 3,width: 170,height: 218,top: 35,left: 110,ZOpacity: 0.7}, 
//				{ZIndex: 4,width: 224,height: 280,top:  0,left: 263,ZOpacity:   1}, 
//				{ZIndex: 3,width: 170,height: 218,top: 35,left: 470,ZOpacity: 0.7}, 
//				{ZIndex: 2,width: 130,height: 170,top: 59,left: 620,ZOpacity: 0.5}, 
//				{ZIndex: 1,width: 120,height: 150,top: 69,left: 500,ZOpacity: 0.2}
//			];
//			var lis = $ele.find('li');
//			//让每个li对应上面staues的每个状态
//			function move() {
//				lis.each(function(index, value) {
//					var state = states[index];
//					$(value).css('z-index', state.ZIndex).finish().animate(state, setting.delay).find('img').css('opacity', state.ZOpacity);
//				});
//			}
//			//让li从正中间展开
//			move();
//			//让轮播图发生偏移
//			function next() {
//				//原理：把数组的最后一个元素移到第一位
//				states.unshift(states.pop());
//				move();
//			}
//			function prev() {
//				//原理：把数组的最后一个元素移到第一位
//				states.push(states.shift());
//				move();
//			}
//			$ele.find('.wwl-next').click(next);
//			$ele.find('.wwl-prev').click(prev);
//			var interval = null;
//			//自动轮播
//			function autoPlay() {
//				interval = setInterval(function() {
//					next();
//				}, setting.speed);
//			}
//			autoPlay();
//			//停止轮播
//			$ele.find('section').add(lis).hover(function() {
//				clearInterval(interval);
//			}, function() {
//				autoPlay();
//			});
//		}
//		//找到要轮播的轮播图的根标签，调用 slide 方法
//		$.fn.wwlSlide = function(options){
//			$(this).each(function(i,ele){
//				slide(ele,options);
//			});
//			//支持链式调用
//			return this;
//		}
//})(jQuery);